<template>
  <a-card>
    <!--  筛选设备  -->
    <a-form-model :model="form" :rules="rulesform" layout="inline" style="margin-bottom: 30px">
      <a-row>
        <a-col :span="6">
          <a-form-model-item prop="FarmId">
            <template #label>
              <span class="custom-label">项 目</span>
            </template>
            <a-select :showSearch="true" optionFilterProp="label" v-model="form.FarmId" placeholder="请选择项目" @change="farmChange" style="width: 230px">
              <a-select-option :value="item.FarmId" v-for="(item,index) in farmList" :label="item.FarmName" :key="index">
                {{ item.FarmName }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="6">
          <a-form-model-item prop="HouseId">
            <template #label>
              <span class="custom-label">大 棚</span>
            </template>
            <a-select :showSearch="true" optionFilterProp="label" v-model="form.HouseId" placeholder="请选择大棚" @change="HouseChange" style="width: 230px">
              <a-select-option :value="item.HouseId" v-for="(item,index) in HouseList"  :label="item.HouseName" :key="index">
                {{ item.HouseName }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="6">
          <a-form-model-item prop="DevCode">
            <template #label>
              <span class="custom-label">LED设备</span>
            </template>
            <a-select :showSearch="true" optionFilterProp="label" v-model="form.DevCode" placeholder="请选择LED设备" style="width: 230px">
              <a-select-option :value="item.DevCode" v-for="(item,index) in DevList" :label="item.DevName" :key="index">
                {{ item.DevName }} - {{ item.DevCode }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
    <!-- 基础配置按钮 -->

    <a-divider orientation="left" style="letter-spacing: 5px;font-weight: bold">基础配置</a-divider>
    <div>
      <a-button type="primary" icon="read" @click="loadLedFileHttp()" style="margin-right: 16px">读取配置</a-button>
      <a-button type="primary" icon="save" @click="saveLedFileHttp()" style="margin-right: 16px">保存配置</a-button>
      <a-button type="primary" icon="sound" @click="sendLedConfigHttp()" style="margin-right: 16px">发送基础配置
      </a-button>
      <a-button type="primary" icon="cloud-download" @click="downloadBasics()">下载基础配置</a-button>
    </div>
    <!-- 基础配置内容 -->
    <a-form-model
        ref="baseForm"
        :model="devData.BaseConfig"
        :rules="rulesBase"
        layout="inline"
    >
      <a-row style="margin: 20px 0">
        <a-col :span="6">
          <a-form-model-item prop="InitFlag">
            <template #label>
              <span class="custom-label">是否启用</span>
            </template>
            <a-select v-model="devData.BaseConfig.InitFlag" style="width: 230px" placeholder="请选择是否启用">
              <a-select-option :value="0">不启用</a-select-option>
              <a-select-option :value="23205">启用</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="6">
          <a-form-model-item prop="TxChannel">
            <template #label>
              <span class="custom-label">发射信道</span>
            </template>
            <a-input placeholder="请输入发射信道" v-model="devData.BaseConfig.TxChannel" style="width: 230px"/>
          </a-form-model-item>
        </a-col>
        <a-col :span="6">
          <a-form-model-item prop="RxChannel">
            <template #label>
              <span class="custom-label">接收信道</span>
            </template>
            <a-input placeholder="请输入接收信道" v-model="devData.BaseConfig.RxChannel" style="width: 230px"/>
          </a-form-model-item>
        </a-col>
        <a-col :span="6">
          <a-form-model-item prop="ModbusId">
            <template #label>
              <span class="custom-label">Modbus</span>
            </template>
            <a-input placeholder="请输入Modbus" v-model="devData.BaseConfig.ModbusId" style="width: 230px"/>
          </a-form-model-item>
        </a-col>
      </a-row>

      <a-row style="margin: 20px 0">
        <a-col :span="6">
          <a-form-model-item prop="Role">
            <template #label>
              <span class="custom-label">设备角色</span>
            </template>
            <a-select v-model="devData.BaseConfig.Role" style="width: 230px" placeholder="请选择设备角色">
              <a-select-option :value="0">RF从机</a-select-option>
              <a-select-option :value="1">RS485从机</a-select-option>
              <a-select-option :value="2">主机</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="6">
          <a-form-model-item prop="DouColor">
            <template #label>
              <span class="custom-label">单 双 色</span>
            </template>
            <a-select v-model="devData.BaseConfig.DouColor" style="width: 230px" placeholder="请选择单双色">
              <a-select-option :value="0">单色</a-select-option>
              <a-select-option :value="1">双色</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="6">
          <a-form-model-item prop="PageSwRate">
            <template #label>
              <span class="custom-label">翻面速度</span>
            </template>
            <a-input placeholder="请输入翻面速度" v-model="devData.BaseConfig.PageSwRate" style="width: 230px"/>
          </a-form-model-item>
        </a-col>
        <a-col :span="6">
          <a-form-model-item prop="OEPolarity">
            <template #label>
              <span class="custom-label">OE 极 性</span>
            </template>
            <a-select v-model="devData.BaseConfig.OEPolarity" style="width: 230px" placeholder="请选择OE极性">
              <a-select-option :value="0">低有效</a-select-option>
              <a-select-option :value="1">高有效</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
      </a-row>

      <a-row style="margin: 20px 0">
        <a-col :span="6">
          <a-form-model-item prop="DataPolarity">
            <template #label>
              <span class="custom-label">数据极性</span>
            </template>
            <a-select v-model="devData.BaseConfig.DataPolarity" style="width: 230px" placeholder="请选择数据极性">
              <a-select-option :value="0">负极性</a-select-option>
              <a-select-option :value="1">正极性</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="6">
          <a-form-model-item prop="XNum">
            <template #label>
              <span class="custom-label">横向单元</span>
            </template>
            <a-input placeholder="请输入横向单元" v-model="devData.BaseConfig.XNum" style="width: 230px"/>
          </a-form-model-item>
        </a-col>
        <a-col :span="6">
          <a-form-model-item prop="YNum">
            <template #label>
              <span class="custom-label">纵向单元</span>
            </template>
            <a-input placeholder="请输入纵向单元" v-model="devData.BaseConfig.YNum" style="width: 230px"/>
          </a-form-model-item>
        </a-col>
        <a-col :span="6">
          <a-form-model-item prop="ScanType">
            <template #label>
              <span class="custom-label">扫描方式</span>
            </template>
            <a-select v-model="devData.BaseConfig.ScanType" style="width: 230px" placeholder="请选择扫描方式">
              <a-select-option :value="0">0（P4.75通用）</a-select-option>
              <a-select-option :value="1">2.8（P10通用）</a-select-option>
              <a-select-option :value="2">2.80（P10强力）</a-select-option>
              <a-select-option :value="3">2.41（P10强力1/2）</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
      </a-row>

      <a-row style="margin: 20px 0">
        <a-col :span="6">
          <a-form-model-item prop="Pagesize">
            <template #label>
              <span class="custom-label">节目页数</span>
            </template>
            <a-input placeholder="请输入节目页数" v-model="devData.BaseConfig.Pagesize" style="width: 230px"/>
          </a-form-model-item>
        </a-col>
        <a-col :span="6">
          <a-form-model-item prop="Rs485Idle">
            <template #label>
              <span class="custom-label">RS485延迟</span>
            </template>
            <a-input placeholder="请输入RS485延迟" v-model="devData.BaseConfig.Rs485Idle" style="width: 230px"/>
          </a-form-model-item>
        </a-col>
        <a-col :span="6">
          <a-form-model-item prop="Baud">
            <template #label>
              <span class="custom-label">波 特 率</span>
            </template>
            <a-input placeholder="请输入波特率" v-model="devData.BaseConfig.Baud" style="width: 230px"/>
          </a-form-model-item>
        </a-col>
        <a-col :span="6">
          <a-form-model-item prop="Title">
            <template #label>
              <span class="custom-label">标 题</span>
            </template>
            <a-input placeholder="请输入标题" v-model="devData.BaseConfig.Title" style="width: 230px"/>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row style="margin: 20px 0">
        <a-col :span="6">
          <a-form-model-item prop="UserName">
            <template #label>
              <span class="custom-label">用户名</span>
            </template>
            <a-input placeholder="请输入用户名" v-model="devData.BaseConfig.UserName" style="width: 230px"/>
          </a-form-model-item>
        </a-col>
        <a-col :span="6">
          <a-form-model-item prop="Password">
            <template #label>
              <span class="custom-label">密码</span>
            </template>
            <a-input-password placeholder="请输入密码" v-model="devData.BaseConfig.Password" style="width: 230px"/>
          </a-form-model-item>
        </a-col>
        <a-col :span="6">
          <a-form-model-item prop="DevCode0">
            <template #label>
              <span class="custom-label">设备编码0</span>
            </template>
            <a-input placeholder="请输入设备编码0" v-model="devData.BaseConfig.DevCode0" style="width: 230px"/>
          </a-form-model-item>
        </a-col>
        <a-col :span="6">
          <a-form-model-item prop="DevCode1">
            <template #label>
              <span class="custom-label">设备编码1</span>
            </template>
            <a-input placeholder="请输入设备编码1" v-model="devData.BaseConfig.DevCode1" style="width: 230px"/>
          </a-form-model-item>
        </a-col>
      </a-row>

      <a-row style="margin: 20px 0">
        <a-col :span="6">
          <a-form-model-item prop="DevCode2">
            <template #label>
              <span class="custom-label">设备编码2</span>
            </template>
            <a-input placeholder="请输入设备编码2" v-model="devData.BaseConfig.DevCode2" style="width: 230px"/>
          </a-form-model-item>
        </a-col>
        <a-col :span="6">
          <a-form-model-item prop="DevCode3">
            <template #label>
              <span class="custom-label">设备编码3</span>
            </template>
            <a-input placeholder="请输入设备编码3" v-model="devData.BaseConfig.DevCode3" style="width: 230px"/>
          </a-form-model-item>
        </a-col>
        <a-col :span="6">
          <a-form-model-item prop="DevCode4">
            <template #label>
              <span class="custom-label">设备编码4</span>
            </template>
            <a-input placeholder="请输入设备编码4" v-model="devData.BaseConfig.DevCode4" style="width: 230px"/>
          </a-form-model-item>
        </a-col>
        <a-col :span="6">
          <a-form-model-item prop="DevCode5">
            <template #label>
              <span class="custom-label">设备编码5</span>
            </template>
            <a-input placeholder="请输入设备编码5" v-model="devData.BaseConfig.DevCode5" style="width: 230px"/>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row style="margin: 20px 0">
        <a-col :span="6">
          <a-form-model-item prop="DevCode6">
            <template #label>
              <span class="custom-label">设备编码6</span>
            </template>
            <a-input placeholder="请输入设备编码6" v-model="devData.BaseConfig.DevCode6" style="width: 230px"/>
          </a-form-model-item>
        </a-col>
        <a-col :span="6">
          <a-form-model-item prop="DevCode7">
            <template #label>
              <span class="custom-label">设备编码7</span>
            </template>
            <a-input placeholder="请输入设备编码7" v-model="devData.BaseConfig.DevCode7" style="width: 230px"/>
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
    <!-- 节目配置按钮 -->
    <a-divider orientation="left" style="letter-spacing: 5px;font-weight: bold">节目配置</a-divider>
    <div>
      <a-button type="primary" icon="read" @click="loadLedFileHttp()" style="margin-right: 16px">读取配置</a-button>
      <a-button type="primary" icon="save" @click="saveLedFileHttp()" style="margin-right: 16px">保存配置</a-button>
      <a-button type="primary" icon="sound" @click="sendLedProgramHttp()" style="margin-right: 16px">发送节目配置
      </a-button>
      <a-button type="primary" icon="cloud-download" @click="downloadProgram()" style="margin-right: 16px">
        下载节目配置
      </a-button>
      <a-button type="primary" icon="alert" @click="inspectProgram()">节目配置检查</a-button>
    </div>
    <!-- 底板 -->
    <div style="display: flex;flex-wrap:wrap">
      <div class="led-plate"
           :style="{
              'width':`${devData.BaseConfig.XNum * (devData.BaseConfig.ScanType === 0?64:32) * 2}px`,
              'height':`${devData.BaseConfig.YNum * (devData.BaseConfig.ScanType === 0?32:16) * 2}px`
            }" v-for="num in Number(devData.BaseConfig.Pagesize)" :key="num" style="margin: 10px 10px 60px 0;">
        <!-- 循环直线配置 横线：Y轴不变 ,竖线：X轴不变-->
        <div v-for="(item,index) in devData.Page.LineConfig" :key="`${num}${index}${item.StartX}${item.StartY}`">
          <div :style="{
              'width':Math.abs(item.EndX - item.StartX) === 0?'3px':`${Math.abs(item.EndX - item.StartX) * 2}px`,
              'height':Math.abs(item.EndY - item.StartY) === 0?'3px':`${Math.abs(item.EndY - item.StartY) * 2}px`,
              'background-color':item.Color === 1?'#ff0000':item.Color === 2?'#008000':'#FFFF00',
              'top':`${item.StartY * 2}px`,
              'left':`${item.StartX * 2}px`,
            }" title="直线配置" class="disposition-line" :class="{'disposition-line-select':item.isSelect}"
               v-if="canShow(item.PageArr,num)"
               @click="openLine(item, index)"></div>
        </div>
        <!-- 循环文本配置 -->
        <div v-for="(item,index) in devData.Page.TextConfig" :key="`${num}${index}${item.StartX}${item.StartY}`">
          <div :style="{
              'width':`${item.Length * 2}px`,
              'height':`${item.Width * 2}px`,
              'font-size':`${item.FontSize * 2}px`,
              'color':item.Color === 1?'#ff0000':item.Color === 2?'#008000':'#FFFF00',
              'top':`${item.StartY * 2}px`,
              'left':`${item.StartX * 2}px`,
              'text-align':`${item.XAlign === 1?'right':item.XAlign === 0?'left':'center'}`,
              'line-height':`${item.YAlign === 2?`${item.Width * 2}px`:item.XAlign === 1?`${(item.Width + 5) * 2}px`:`${(item.Width - 5) * 2}px`}`
            }" title="文本配置" class="disposition" :class="{'disposition-select':item.isSelect}"
               v-if="canShow(item.PageArr,num)"
               @click="openText(item, index)">
            <div :class="{'rowLeft':item.XAlign === 3}">{{ item.Text }}</div>
          </div>
        </div>
        <!-- 循环参数配置 -->
        <div v-for="(item,index) in devData.Page.ParasConfig" :key="`${num}${index}${item.StartX}${item.StartY}`">
          <div :style="{
              'width':`${item.Length * 2}px`,
              'height':`${item.Width * 2}px`,
              'font-size':`${item.FontSize * 2}px`,
              'color':item.Color === 1?'#ff0000':item.Color === 2?'#008000':'#FFFF00',
              'top':`${item.StartY * 2}px`,
              'left':`${item.StartX * 2}px`,
              'text-align':`${item.XAlign === 1?'right':item.XAlign === 0?'left':'center'}`,
              'line-height':`${item.YAlign === 2?`${item.Width * 2}px`:item.XAlign === 1?`${(item.Width + 5) * 2}px`:`${(item.Width - 5) * 2}px`}`
            }" title="参数配置" class="disposition" :class="{'disposition-select':item.isSelect}"
               v-if="canShow(item.PageArr,num)"
               @click="openParas(item, index)">
            <div :class="{'rowLeft':item.XAlign === 3}">{{
                item.Decnum === 255 ? devData.BaseConfig.Title : '日日.日日'
              }}
            </div>
          </div>
        </div>

        <div class="led-page">第{{ num }}页</div>
      </div>
    </div>
    <!-- 节目配置内容 -->
    <a-tabs v-model="activeKey">
      <a-tab-pane key="1" force-render>
        <span slot="tab"><a-icon type="gateway"/>直线配置</span>
        <div class="table-add-swl">
          <a-button type="primary" icon="plus" @click="openLine()">新增</a-button>
        </div>
        <a-table bordered :columns="LineColumns"
                 :data-source="devData.Page.LineConfig"
                 :pagination="false"
                 :rowKey="(record,index)=>{return index}"
                 :scroll="{ x: 1500 }"
                 :row-selection="{ selectedRowKeys: selectedLine, onChange: onSelectLine}">
          <div slot="StartX" slot-scope="record, index">
            <div :style="{'color':index.isWarn.includes('StartX')?'#ff0000':'rgba(0, 0, 0, 0.65)',
            'font-weight':index.isWarn.includes('StartX')?'bold':'inherit',
            'font-size':index.isWarn.includes('StartX')?'18px':'inherit'}">{{ index.StartX }}
            </div>
          </div>
          <div slot="StartY" slot-scope="record, index">
            <div :style="{'color':index.isWarn.includes('StartY')?'#ff0000':'rgba(0, 0, 0, 0.65)',
            'font-weight':index.isWarn.includes('StartY')?'bold':'inherit',
            'font-size':index.isWarn.includes('StartY')?'18px':'inherit'}">{{ index.StartY }}
            </div>
          </div>
          <div slot="EndX" slot-scope="record, index">
            <div :style="{'color':index.isWarn.includes('EndX')?'#ff0000':'rgba(0, 0, 0, 0.65)',
            'font-weight':index.isWarn.includes('EndX')?'bold':'inherit',
            'font-size':index.isWarn.includes('EndX')?'18px':'inherit'}">{{ index.EndX }}
            </div>
          </div>
          <div slot="EndY" slot-scope="record, index">
            <div :style="{'color':index.isWarn.includes('EndY')?'#ff0000':'rgba(0, 0, 0, 0.65)',
            'font-weight':index.isWarn.includes('EndY')?'bold':'inherit',
            'font-size':index.isWarn.includes('EndY')?'18px':'inherit'}">{{ index.EndY }}
            </div>
          </div>
          <!-- 颜色 -->
          <div slot="Color" slot-scope="Color">
            <a-tag color="#FF0000" v-if="Color === 1">红</a-tag>
            <a-tag color="#87d068" v-else-if="Color === 2">绿</a-tag>
            <a-tag color="#FFD700" v-else>黄</a-tag>
          </div>
          <!-- 所属页 -->
          <div slot="PageArr" slot-scope="PageArr">
            <span v-for="(item,index) in PageArr" :key="index">
              <span v-if="item === 100">全部页面</span>
              <span v-else>页面{{ item + 1 }}</span>
              <span v-if="PageArr.length > 1 && PageArr.length !== index + 1">，</span>
            </span>
          </div>
          <!-- 操作 -->
          <div slot="operation" style="margin-left: -16px;" slot-scope="record, index, indent">
            <a-row type="flex" justify="space-around">
              <a-col :span="4">
                <a-button type="link" @click="openLine(record, indent)">编辑</a-button>
              </a-col>
              <a-col :span="4">
                <a-button type="link" @click="moveUp(record, indent)">上移</a-button>
              </a-col>
              <a-col :span="4">
                <a-button type="link" @click="moveDown(record, indent)">下移</a-button>
              </a-col>
              <a-col :span="4">
                <a-button type="link" @click="copyRecord(record, indent)">克隆</a-button>
              </a-col>
              <a-col :span="4">
                <a-popconfirm
                    title="是否删除此行?"
                    ok-text="是"
                    cancel-text="否"
                    @confirm="deleteRecord(indent)"
                >
                  <a-button type="link" style="color:#F08080">删除</a-button>
                </a-popconfirm>
              </a-col>
            </a-row>
          </div>
        </a-table>
      </a-tab-pane>
      <a-tab-pane key="2">
        <span slot="tab"><a-icon type="file-text"/>文本配置</span>
        <div class="table-add-swl">
          <a-button type="primary" icon="plus" @click="openText()">新增</a-button>
        </div>
        <a-table bordered :columns="TextColumns"
                 :data-source="devData.Page.TextConfig"
                 :pagination="false"
                 :rowKey="(record,index)=>{return index}"
                 :scroll="{ x: 1500 }"
                 :row-selection="{ selectedRowKeys: selectedText, onChange: onSelectText}">
          <div slot="StartX" slot-scope="record, index">
            <div :style="{'color':index.isWarn.includes('StartX')?'#ff0000':'rgba(0, 0, 0, 0.65)',
            'font-weight':index.isWarn.includes('StartX')?'bold':'inherit',
            'font-size':index.isWarn.includes('StartX')?'18px':'inherit'}">{{ index.StartX }}
            </div>
          </div>
          <div slot="StartY" slot-scope="record, index">
            <div :style="{'color':index.isWarn.includes('StartY')?'#ff0000':'rgba(0, 0, 0, 0.65)',
            'font-weight':index.isWarn.includes('StartY')?'bold':'inherit',
            'font-size':index.isWarn.includes('StartY')?'18px':'inherit'}">{{ index.StartY }}
            </div>
          </div>
          <div slot="Length" slot-scope="record, index">
            <div :style="{'color':index.isWarn.includes('Length')?'#ff0000':'rgba(0, 0, 0, 0.65)',
            'font-weight':index.isWarn.includes('Length')?'bold':'inherit',
            'font-size':index.isWarn.includes('Length')?'18px':'inherit'}">{{ index.Length }}
            </div>
          </div>
          <div slot="Width" slot-scope="record, index">
            <div :style="{'color':index.isWarn.includes('Width')?'#ff0000':'rgba(0, 0, 0, 0.65)',
            'font-weight':index.isWarn.includes('Width')?'bold':'inherit',
            'font-size':index.isWarn.includes('Width')?'18px':'inherit'}">{{ index.Width }}
            </div>
          </div>
          <!-- 颜色 -->
          <div slot="Color" slot-scope="Color">
            <a-tag color="#FF0000" v-if="Color === 1">红</a-tag>
            <a-tag color="#87d068" v-else-if="Color === 2">绿</a-tag>
            <a-tag color="#FFD700" v-else>黄</a-tag>
          </div>
          <!-- x对齐 -->
          <div slot="XAlign" slot-scope="XAlign">
            {{ XAlignList[XAlign] }}
          </div>
          <!-- y对齐 -->
          <div slot="YAlign" slot-scope="YAlign">
            {{ YAlignList[YAlign] }}
          </div>
          <!-- 所属页 -->
          <div slot="PageArr" slot-scope="PageArr">
            <span v-for="(item,index) in PageArr" :key="index">
              <span v-if="item === 100">全部页面</span>
              <span v-else>页面{{ item + 1 }}</span>
              <span v-if="PageArr.length > 1 && PageArr.length !== index + 1">，</span>
            </span>
          </div>
          <!-- 操作 -->
          <div slot="operation" style="margin-left: -16px;" slot-scope="record, index, indent">
            <a-row type="flex" justify="space-around">
              <a-col :span="4">
                <a-button type="link" @click="openText(record, indent)">编辑</a-button>
              </a-col>
              <a-col :span="4">
                <a-button type="link" @click="moveUp(record, indent)">上移</a-button>
              </a-col>
              <a-col :span="4">
                <a-button type="link" @click="moveDown(record, indent)">下移</a-button>
              </a-col>
              <a-col :span="4">
                <a-button type="link" @click="copyRecord(record, indent)">克隆</a-button>
              </a-col>
              <a-col :span="4">
                <a-popconfirm
                    title="是否删除此行?"
                    ok-text="是"
                    cancel-text="否"
                    @confirm="deleteRecord(indent)"
                >
                  <a-button type="link" style="color:#F08080">删除</a-button>
                </a-popconfirm>
              </a-col>
            </a-row>
          </div>
        </a-table>
      </a-tab-pane>
      <a-tab-pane key="3">
        <span slot="tab"><a-icon type="dashboard"/>参数配置</span>
        <div class="table-add-swl">
          <a-button type="primary" icon="plus" @click="openParas()">新增</a-button>
        </div>
        <a-table bordered :columns="ParasColumns"
                 :data-source="devData.Page.ParasConfig"
                 :pagination="false"
                 :rowKey="(record,index)=>{return index}"
                 :scroll="{ x: 1500 }"
                 :row-selection="{ selectedRowKeys: selectedParas, onChange: onSelectParas}">
          <div slot="StartX" slot-scope="record, index">
            <div :style="{'color':index.isWarn.includes('StartX')?'#ff0000':'rgba(0, 0, 0, 0.65)',
            'font-weight':index.isWarn.includes('StartX')?'bold':'inherit',
            'font-size':index.isWarn.includes('StartX')?'18px':'inherit'}">{{ index.StartX }}
            </div>
          </div>
          <div slot="StartY" slot-scope="record, index">
            <div :style="{'color':index.isWarn.includes('StartY')?'#ff0000':'rgba(0, 0, 0, 0.65)',
            'font-weight':index.isWarn.includes('StartY')?'bold':'inherit',
            'font-size':index.isWarn.includes('StartY')?'18px':'inherit'}">{{ index.StartY }}
            </div>
          </div>
          <div slot="Length" slot-scope="record, index">
            <div :style="{'color':index.isWarn.includes('Length')?'#ff0000':'rgba(0, 0, 0, 0.65)',
            'font-weight':index.isWarn.includes('Length')?'bold':'inherit',
            'font-size':index.isWarn.includes('Length')?'18px':'inherit'}">{{ index.Length }}
            </div>
          </div>
          <div slot="Width" slot-scope="record, index">
            <div :style="{'color':index.isWarn.includes('Width')?'#ff0000':'rgba(0, 0, 0, 0.65)',
            'font-weight':index.isWarn.includes('Width')?'bold':'inherit',
            'font-size':index.isWarn.includes('Width')?'18px':'inherit'}">{{ index.Width }}
            </div>
          </div>
          <!-- 小数位数 -->
          <div slot="Decnum" slot-scope="Decnum">
            {{ showDecnum(Decnum) }}
          </div>
          <!-- 颜色 -->
          <div slot="Color" slot-scope="Color">
            <a-tag color="#FF0000" v-if="Color === 1">红</a-tag>
            <a-tag color="#87d068" v-else-if="Color === 2">绿</a-tag>
            <a-tag color="#FFD700" v-else>黄</a-tag>
          </div>
          <!-- x对齐 -->
          <div slot="XAlign" slot-scope="XAlign">
            {{ XAlignList[XAlign] }}
          </div>
          <!-- y对齐 -->
          <div slot="YAlign" slot-scope="YAlign">
            {{ YAlignList[YAlign] }}
          </div>
          <!-- 所属页 -->
          <div slot="PageArr" slot-scope="PageArr">
            <span v-for="(item,index) in PageArr" :key="index">
              <span v-if="item === 100">全部页面</span>
              <span v-else>页面{{ item + 1 }}</span>
              <span v-if="PageArr.length > 1 && PageArr.length !== index + 1">，</span>
            </span>
          </div>
          <!-- 操作 -->
          <div slot="operation" style="margin-left: -16px;" slot-scope="record, index, indent">
            <a-row type="flex" justify="space-around">
              <a-col :span="4">
                <a-button type="link" @click="openParas(record, indent)">编辑</a-button>
              </a-col>
              <a-col :span="4">
                <a-button type="link" @click="moveUp(record, indent)">上移</a-button>
              </a-col>
              <a-col :span="4">
                <a-button type="link" @click="moveDown(record, indent)">下移</a-button>
              </a-col>
              <a-col :span="4">
                <a-button type="link" @click="copyRecord(record, indent)">克隆</a-button>
              </a-col>
              <a-col :span="4">
                <a-popconfirm
                    title="是否删除此行?"
                    ok-text="是"
                    cancel-text="否"
                    @confirm="deleteRecord(indent)"
                >
                  <a-button type="link" style="color:#F08080">删除</a-button>
                </a-popconfirm>
              </a-col>
            </a-row>
          </div>
        </a-table>
      </a-tab-pane>
      <a-tab-pane key="4">
        <span slot="tab"><a-icon type="book"/>值字典配置</span>
        <div class="table-add-swl">
          <a-button type="primary" icon="plus" @click="openDict()">新增</a-button>
        </div>
        <a-table bordered :columns="DictColumns"
                 :data-source="devData.Page.DictConfig"
                 :pagination="false"
                 :rowKey="(record,index)=>{return index}"
                 :scroll="{ x: 1500 }">
          <!-- 操作 -->
          <div slot="operation" style="margin-left: -16px;" slot-scope="record, index, indent">
            <a-row type="flex" justify="space-around">
              <a-col :span="4">
                <a-button type="link" @click="openDict(record, indent)">编辑</a-button>
              </a-col>
              <a-col :span="4">
                <a-button type="link" @click="moveUp(record, indent)">上移</a-button>
              </a-col>
              <a-col :span="4">
                <a-button type="link" @click="moveDown(record, indent)">下移</a-button>
              </a-col>
              <a-col :span="4">
                <a-button type="link" @click="copyRecord(record, indent)">克隆</a-button>
              </a-col>
              <a-col :span="4">
                <a-popconfirm
                    title="是否删除此行?"
                    ok-text="是"
                    cancel-text="否"
                    @confirm="deleteRecord(indent)"
                >
                  <a-button type="link" style="color:#F08080">删除</a-button>
                </a-popconfirm>
              </a-col>
            </a-row>
          </div>
        </a-table>
      </a-tab-pane>
      <a-tab-pane key="5">
        <span slot="tab"><a-icon type="eye"/>预览配置</span>
        <!-- 底板 -->
        <div class="led-plate"
             :style="{
              'width':`${devData.BaseConfig.XNum * (devData.BaseConfig.ScanType === 0?64:32) * 2}px`,
              'height':`${devData.BaseConfig.YNum * (devData.BaseConfig.ScanType === 0?32:16) * 2}px`
            }" v-for="num in Number(devData.BaseConfig.Pagesize)" :key="num" style="margin: 10px 10px 60px 0;">
          <!-- 循环直线配置 横线：Y轴不变 ,竖线：X轴不变-->
          <div v-for="(item,index) in devData.Page.LineConfig" :key="`${num}${index}${item.StartX}${item.StartY}`">
            <div :style="{
              'width':Math.abs(item.EndX - item.StartX) === 0?'3px':`${Math.abs(item.EndX - item.StartX) * 2}px`,
              'height':Math.abs(item.EndY - item.StartY) === 0?'3px':`${Math.abs(item.EndY - item.StartY) * 2}px`,
              'background-color':item.Color === 1?'#ff0000':item.Color === 2?'#008000':'#FFFF00',
              'top':`${item.StartY * 2}px`,
              'left':`${item.StartX * 2}px`,
            }" title="直线配置" class="disposition-line" :class="{'disposition-line-select':item.isSelect}"
                 v-if="canShow(item.PageArr,num)"
                 @click="openLine(item, index)"></div>
          </div>
          <!-- 循环文本配置 -->
          <div v-for="(item,index) in devData.Page.TextConfig" :key="`${num}${index}${item.StartX}${item.StartY}`">
            <div :style="{
              'width':`${item.Length * 2}px`,
              'height':`${item.Width * 2}px`,
              'font-size':`${item.FontSize * 2}px`,
              'color':item.Color === 1?'#ff0000':item.Color === 2?'#008000':'#FFFF00',
              'top':`${item.StartY * 2}px`,
              'left':`${item.StartX * 2}px`,
              'text-align':`${item.XAlign === 1?'right':item.XAlign === 0?'left':'center'}`,
              'line-height':`${item.YAlign === 2?`${item.Width * 2}px`:item.XAlign === 1?`${(item.Width + 5) * 2}px`:`${(item.Width - 5) * 2}px`}`
            }" title="文本配置" class="disposition" :class="{'disposition-select':item.isSelect}"
                 v-if="canShow(item.PageArr,num)"
                 @click="openText(item, index)">
              <div :class="{'rowLeft':item.XAlign === 3}">{{ item.Text }}</div>
            </div>
          </div>
          <!-- 循环参数配置 -->
          <div v-for="(item,index) in devData.Page.ParasConfig" :key="`${num}${index}${item.StartX}${item.StartY}`">
            <div :style="{
              'width':`${item.Length * 2}px`,
              'height':`${item.Width * 2}px`,
              'font-size':`${item.FontSize * 2}px`,
              'color':item.Color === 1?'#ff0000':item.Color === 2?'#008000':'#FFFF00',
              'top':`${item.StartY * 2}px`,
              'left':`${item.StartX * 2}px`,
              'text-align':`${item.XAlign === 1?'right':item.XAlign === 0?'left':'center'}`,
              'line-height':`${item.YAlign === 2?`${item.Width * 2}px`:item.XAlign === 1?`${(item.Width + 5) * 2}px`:`${(item.Width - 5) * 2}px`}`
            }" title="参数配置" class="disposition" :class="{'disposition-select':item.isSelect}"
                 v-if="canShow(item.PageArr,num)"
                 @click="openParas(item, index)">
              <div :class="{'rowLeft':item.XAlign === 3}">{{
                  item.Decnum === 255 ? devData.BaseConfig.Title : '日日.日日'
                }}
              </div>
            </div>
          </div>

          <div class="led-page">第{{ num }}页</div>
        </div>
      </a-tab-pane>
    </a-tabs>
    <!-- 直线配置新增、编辑  -->
    <a-modal v-model="showLine" v-if="showLine" :title="`直线配置${isLineAdd?'新增':'编辑'}`" @ok="lineOk"
             width="600px">
      <a-form-model :model="dataLine" :rules="rulesLine" ref="formLine">
        <div style="flex-wrap: wrap; display: flex;justify-content: space-around">
          <a-form-model-item label="起点x" style="width: 45%;" prop="StartX">
            <a-input v-model="dataLine.StartX" placeholder="请输入起点x"/>
          </a-form-model-item>
          <a-form-model-item label="起点y" style="width: 45%;" prop="StartY">
            <a-input v-model="dataLine.StartY" placeholder="请输入起点y"/>
          </a-form-model-item>
        </div>
        <div style="flex-wrap: wrap; display: flex;justify-content: space-around">
          <a-form-model-item label="结束x" style="width: 45%;" prop="EndX">
            <a-input v-model="dataLine.EndX" placeholder="请输入结束x"/>
          </a-form-model-item>
          <a-form-model-item label="结束y" style="width: 45%;" prop="EndY">
            <a-input v-model="dataLine.EndY" placeholder="请输入结束y"/>
          </a-form-model-item>
        </div>
        <div style="flex-wrap: wrap; display: flex;justify-content: space-around">
          <a-form-model-item label="颜色" style="width: 45%;" prop="Color">
            <a-select v-model="dataLine.Color" placeholder="请选择颜色">
              <a-select-option :value="1">红</a-select-option>
              <a-select-option :value="2">绿</a-select-option>
              <a-select-option :value="3">黄</a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="所属页" style="width: 45%;" prop="PageArr">
            <a-select
                placeholder="请选择所属页"
                mode="multiple"
                v-model="dataLine.PageArr"
            >
              <a-select-option v-for="(item,index) in OwningPage" :key="index" :value="item.id">{{
                  item.name
                }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </div>
      </a-form-model>
    </a-modal>
    <!-- 文本配置新增、编辑  -->
    <a-modal v-model="showText" v-if="showText" :title="`文本配置${isTextAdd?'新增':'编辑'}`" @ok="textOk"
             width="600px">
      <a-form-model :model="dataText" :rules="rulesText" ref="formText">
        <div style="flex-wrap: wrap; display: flex;justify-content: space-around">
          <a-form-model-item label="起点x" style="width: 45%;" prop="StartX">
            <a-input v-model="dataText.StartX" placeholder="请输入起点x"/>
          </a-form-model-item>
          <a-form-model-item label="起点y" style="width: 45%;" prop="StartY">
            <a-input v-model="dataText.StartY" placeholder="请输入起点y"/>
          </a-form-model-item>
        </div>
        <div style="flex-wrap: wrap; display: flex;justify-content: space-around">
          <a-form-model-item label="宽度" style="width: 45%;" prop="Length">
            <a-input v-model="dataText.Length" placeholder="请输入宽度"/>
          </a-form-model-item>
          <a-form-model-item label="高度" style="width: 45%;" prop="Width">
            <a-input v-model="dataText.Width" placeholder="请输入高度"/>
          </a-form-model-item>
        </div>
        <div style="flex-wrap: wrap; display: flex;justify-content: space-around">
          <a-form-model-item label="x对齐" style="width: 45%;" prop="XAlign">
            <a-select v-model="dataText.XAlign" placeholder="请选择x对齐方式">
              <a-select-option v-for="(item,index) in XAlignList" :key="index" :value="index">{{ item }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="y对齐" style="width: 45%;" prop="YAlign">
            <a-select v-model="dataText.YAlign" placeholder="请选择y对齐方式">
              <a-select-option v-for="(item,index) in YAlignList" :key="index" :value="index">{{ item }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </div>
        <div style="flex-wrap: wrap; display: flex;justify-content: space-around">
          <a-form-model-item label="字号" style="width: 45%;" prop="FontSize">
            <a-select v-model="dataText.FontSize" placeholder="请选择字号">
              <a-select-option v-for="(item,index) in FontSizeList" :key="index" :value="item">{{ item }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="颜色" style="width: 45%;" prop="Color">
            <a-select v-model="dataText.Color" placeholder="请选择颜色">
              <a-select-option :value="1">红</a-select-option>
              <a-select-option :value="2">绿</a-select-option>
              <a-select-option :value="3">黄</a-select-option>
            </a-select>
          </a-form-model-item>
        </div>
        <div style="flex-wrap: wrap; display: flex;justify-content: space-around">
          <a-form-model-item label="文本" style="width: 45%;" prop="Text">
            <a-input v-model="dataText.Text" placeholder="请输入文本"/>
          </a-form-model-item>
          <a-form-model-item label="所属页" style="width: 45%;" prop="PageArr">
            <a-select
                placeholder="请选择所属页"
                mode="multiple"
                v-model="dataText.PageArr"
            >
              <a-select-option v-for="(item,index) in OwningPage" :key="index" :value="item.id">{{
                  item.name
                }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </div>
      </a-form-model>
    </a-modal>
    <!-- 参数配置新增、编辑  -->
    <a-modal v-model="showParas" v-if="showParas" :title="`参数配置${isParasAdd?'新增':'编辑'}`" @ok="parasOk"
             width="1000px">
      <a-form-model :model="dataParas" :rules="rulesParas" ref="formParas">
        <div style="flex-wrap: wrap; display: flex;justify-content: space-around">
          <a-form-model-item label="起点x" style="width: 23%;" prop="StartX">
            <a-input v-model="dataParas.StartX" placeholder="请输入起点x"/>
          </a-form-model-item>
          <a-form-model-item label="起点y" style="width: 23%;" prop="StartY">
            <a-input v-model="dataParas.StartY" placeholder="请输入起点y"/>
          </a-form-model-item>
          <a-form-model-item label="宽度" style="width: 23%;" prop="Length">
            <a-input v-model="dataParas.Length" placeholder="请输入宽度"/>
          </a-form-model-item>
          <a-form-model-item label="高度" style="width: 23%;" prop="Width">
            <a-input v-model="dataParas.Width" placeholder="请输入高度"/>
          </a-form-model-item>
        </div>
        <div style="flex-wrap: wrap; display: flex;justify-content: space-around">
          <a-form-model-item label="字号" style="width: 23%;" prop="FontSize">
            <a-select v-model="dataParas.FontSize" placeholder="请选择字号">
              <a-select-option v-for="(item,index) in FontSizeList" :key="index" :value="item">{{ item }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="x对齐" style="width: 23%;" prop="XAlign">
            <a-select v-model="dataParas.XAlign" placeholder="请选择x对齐方式">
              <a-select-option v-for="(item,index) in XAlignList" :key="index" :value="index">{{ item }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="y对齐" style="width: 23%;" prop="YAlign">
            <a-select v-model="dataParas.YAlign" placeholder="请选择y对齐方式">
              <a-select-option v-for="(item,index) in YAlignList" :key="index" :value="index">{{ item }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="小数位数" style="width: 23%;" prop="Decnum">
            <a-select v-model="dataParas.Decnum" placeholder="小数位数">
              <a-select-option v-for="(item,index) in DecnumList" :key="index" :value="item.id">{{ item.value }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </div>
        <div style="flex-wrap: wrap; display: flex;justify-content: space-around">
          <a-form-model-item label="倍率" style="width: 23%;" prop="Mult">
            <a-input v-model="dataParas.Mult" placeholder="请输入倍率"/>
          </a-form-model-item>
          <a-form-model-item label="偏移" style="width: 23%;" prop="Offset">
            <a-input v-model="dataParas.Offset" placeholder="请输入偏移"/>
          </a-form-model-item>
          <a-form-model-item label="寄存器地址" style="width: 23%;">
            <a-input v-model="dataParas.Regaddr" placeholder="请输入寄存器地址"/>
          </a-form-model-item>
          <a-form-model-item label="寄存器个数" style="width: 23%;" prop="Regnum">
            <a-input v-model="dataParas.Regnum" placeholder="请输入寄存器个数"/>
          </a-form-model-item>
        </div>
        <div style="flex-wrap: wrap; display: flex;justify-content: space-around">
          <a-form-model-item label="颜色" style="width: 23%;" prop="Color">
            <a-select v-model="dataParas.Color" placeholder="请选择颜色">
              <a-select-option :value="1">红</a-select-option>
              <a-select-option :value="2">绿</a-select-option>
              <a-select-option :value="3">黄</a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="前缀" style="width: 23%;">
            <a-input v-model="dataParas.Name" placeholder="请输入前缀"/>
          </a-form-model-item>
          <a-form-model-item label="单位" style="width: 23%;">
            <a-input v-model="dataParas.Unit" placeholder="请输入单位"/>
          </a-form-model-item>
          <a-form-model-item label="所属页" style="width: 23%;" prop="PageArr">
            <a-select
                placeholder="请选择所属页"
                mode="multiple"
                v-model="dataParas.PageArr"
            >
              <a-select-option v-for="(item,index) in OwningPage" :key="index" :value="item.id">{{
                  item.name
                }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </div>
      </a-form-model>
    </a-modal>
    <!-- 字典配置新增、编辑  -->
    <a-modal v-model="showDict" v-if="showDict" :title="`值字典配置${isDictAdd?'新增':'编辑'}`" @ok="dictOk"
             width="1000px">
      <a-form-model>
        <div style="flex-wrap: wrap; display: flex;justify-content: space-around">
          <a-form-model-item :label="`值字典${index}`" v-for="(item,index) in dataDict.Dict" :key="index"
                             style="width: 23%;">
            <a-input v-model="dataDict.Dict[index]" :placeholder="`请输入值字典${index}`"/>
          </a-form-model-item>
        </div>
      </a-form-model>
    </a-modal>
  </a-card>
</template>

<script>
import {list as farmList} from "@/services/farm";
import {list as devList} from "@/services/dev";
import {getMessageStatus, loadLedFile, saveLedFile, sendLedConfig, sendLedConfigdisplay} from "@/services/led";

export default {
  name: "led",
  data() {
    return {
      /*  筛选设备  */
      farmList: [],//项目列表
      HouseList: [],//大棚列表
      DevList: [],//LED设备列表
      form: {
        FarmId: undefined,//项目ID
        HouseId: undefined,//大棚ID
        DevCode: undefined,//当前LED设备code
      },
      rulesform: {
        FarmId: {required: true, message: '请选择项目', trigger: 'select'},//项目ID
        HouseId: {required: true, message: '请选择大棚', trigger: 'select'},//大棚ID
        DevCode: {required: true, message: '请选择LED设备', trigger: 'select'},//当前LED设备code
      },
      devData: {
        BaseConfig: {
          Baud: undefined,
          DataPolarity: undefined,
          DouColor: undefined,
          InitFlag: undefined,
          ModbusId: undefined,
          OEPolarity: undefined,
          PageSwRate: undefined,
          Pagesize: 0,
          Role: undefined,
          Rs485Idle: undefined,
          RxChannel: undefined,
          ScanType: undefined,
          Title: undefined,
          TxChannel: undefined,
          XNum: undefined,
          YNum: undefined,
          UserName: undefined,
          Password: undefined,
          DevCode0: undefined,
          DevCode1: undefined,
          DevCode2: undefined,
          DevCode3: undefined,
          DevCode4: undefined,
          DevCode5: undefined,
          DevCode6: undefined,
          DevCode7: undefined,
        },
        DevCode:'',
        Page: {
          LineConfig: [],
          DictConfig: [],
          ParasConfig: [],
          TextConfig: []
        }
      },// 配置信息
      /*  基础配置  */
      rulesBase: {
        InitFlag: [{required: true, message: '请选择是否启用', trigger: 'select'}],
        TxChannel: [{required: true, message: '请输入发射信道', trigger: 'blur'},
          {validator: this.validateInteger, trigger: 'blur'}],
        RxChannel: [{required: true, message: '请输入接收信道', trigger: 'blur'},
          {validator: this.validateInteger, trigger: 'blur'}],
        ModbusId: [{required: true, message: '请输入Modbus', trigger: 'blur'},
          {validator: this.validateInteger, trigger: 'blur'}],

        Role: {required: true, message: '请选择设备角色', trigger: 'select'},
        DouColor: {required: true, message: '请选择单双色', trigger: 'select'},
        PageSwRate: [{required: true, message: '请输入翻面速度', trigger: 'blur'},
          {validator: this.validateInteger, trigger: 'blur'}],
        OEPolarity: {required: true, message: '请选择OE极性', trigger: 'select'},

        DataPolarity: {required: true, message: '请选择数据极性', trigger: 'select'},
        XNum: [{required: true, message: '请输入横向单元', trigger: 'blur'},
          {validator: this.validateInteger, trigger: 'blur'}],
        YNum: [{required: true, message: '请输入纵向单元', trigger: 'blur'},
          {validator: this.validateInteger, trigger: 'blur'}],
        ScanType: {required: true, message: '请选择扫描方式', trigger: 'select'},

        Pagesize: [{required: true, message: '请输入节目页数', trigger: 'blur'},
          {validator: this.validateInteger, trigger: 'blur'}],
        Rs485Idle: [{required: true, message: '请输入RS485延迟', trigger: 'blur'},
          {validator: this.validateInteger, trigger: 'blur'}],
        Baud: [{required: true, message: '请输入波特率', trigger: 'blur'},
          {validator: this.validateInteger, trigger: 'blur'}],

        UserName: {required: false, message: '请输入用户名', trigger: 'blur'},
        Password: {required: false, message: '请输入密码', trigger: 'blur'},
        DevCode0: {required: false, message: '请输入设备编号0', trigger: 'blur'},
        DevCode1: {required: false, message: '请输入设备编号1', trigger: 'blur'},

        DevCode2: {required: false, message: '请输入设备编号2', trigger: 'blur'},
        DevCode3: {required: false, message: '请输入设备编号3', trigger: 'blur'},
        DevCode4: {required: false, message: '请输入设备编号4', trigger: 'blur'},
        DevCode5: {required: false, message: '请输入设备编号5', trigger: 'blur'},

        DevCode6: {required: false, message: '请输入设备编号6', trigger: 'blur'},
        DevCode7: {required: false, message: '请输入设备编号7', trigger: 'blur'},
      },
      /*  节目配置  */
      activeKey: '1',//节目导航
      //直线配置
      LineColumns: [{
        title: "序号",
        dataIndex: "key",
        key: "key",
        align: "center",
        width: 65,
        customRender: (text, record, index) => `${index + 1}`,//此处为重点
      }, {
        title: '起点x',
        dataIndex: 'StartX',
        align: 'center',
        key: 'StartX',
        scopedSlots: {customRender: 'StartX'}
      }, {
        title: '起点y',
        dataIndex: 'StartY',
        align: 'center',
        key: 'StartY',
        scopedSlots: {customRender: 'StartY'}
      }, {
        title: '结束x',
        dataIndex: 'EndX',
        align: 'center',
        key: 'EndX',
        scopedSlots: {customRender: 'EndX'}
      }, {
        title: '结束y',
        dataIndex: 'EndY',
        align: 'center',
        key: 'EndY',
        scopedSlots: {customRender: 'EndY'}
      }, {
        title: '颜色',
        dataIndex: 'Color',
        align: 'center',
        key: 'Color',
        scopedSlots: {customRender: 'Color'}
      }, {
        title: '所属页',
        dataIndex: 'PageArr',
        align: 'center',
        key: 'PageArr',
        width: 300,
        scopedSlots: {customRender: 'PageArr'}
      }, {
        title: '操作',
        key: 'operation',
        fixed: 'right',
        align: 'center',
        width: 250,
        scopedSlots: {customRender: 'operation'},
      }],
      //文本配置
      TextColumns: [{
        title: "序号",
        dataIndex: "key",
        key: "key",
        align: "center",
        width: 65,
        customRender: (text, record, index) => `${index + 1}`,//此处为重点
      }, {
        title: '起点x',
        dataIndex: 'StartX',
        align: 'center',
        key: 'StartX',
        scopedSlots: {customRender: 'StartX'}
      }, {
        title: '起点y',
        dataIndex: 'StartY',
        align: 'center',
        key: 'StartY',
        scopedSlots: {customRender: 'StartY'}
      }, {
        title: '宽度',
        dataIndex: 'Length',
        align: 'center',
        key: 'Length',
        scopedSlots: {customRender: 'Length'}
      }, {
        title: '高度',
        dataIndex: 'Width',
        align: 'center',
        key: 'Width',
        scopedSlots: {customRender: 'Width'}
      }, {
        title: '字号',
        dataIndex: 'FontSize',
        align: 'center',
        key: 'FontSize'
      }, {
        title: 'x对齐',
        dataIndex: 'XAlign',
        align: 'center',
        key: 'XAlign',
        scopedSlots: {customRender: 'XAlign'}
      }, {
        title: 'y对齐',
        dataIndex: 'YAlign',
        align: 'center',
        key: 'YAlign',
        scopedSlots: {customRender: 'YAlign'}
      }, {
        title: '颜色',
        dataIndex: 'Color',
        align: 'center',
        key: 'Color',
        scopedSlots: {customRender: 'Color'}
      }, {
        title: '文本',
        dataIndex: 'Text',
        align: 'center',
        key: 'Text'
      }, {
        title: '所属页',
        dataIndex: 'PageArr',
        align: 'center',
        key: 'PageArr',
        width: 180,
        scopedSlots: {customRender: 'PageArr'}
      }, {
        title: '操作',
        key: 'operation',
        fixed: 'right',
        align: 'center',
        width: 250,
        scopedSlots: {customRender: 'operation'},
      }],
      //参数配置
      ParasColumns: [{
        title: "序号",
        dataIndex: "key",
        key: "key",
        align: "center",
        width: 65,
        customRender: (text, record, index) => `${index + 1}`,//此处为重点
      }, {
        title: '起点x',
        dataIndex: 'StartX',
        align: 'center',
        key: 'StartX',
        scopedSlots: {customRender: 'StartX'}
      }, {
        title: '起点y',
        dataIndex: 'StartY',
        align: 'center',
        key: 'StartY',
        scopedSlots: {customRender: 'StartY'}
      }, {
        title: '宽度',
        dataIndex: 'Length',
        align: 'center',
        key: 'Length',
        scopedSlots: {customRender: 'Length'}
      }, {
        title: '高度',
        dataIndex: 'Width',
        align: 'center',
        key: 'Width',
        scopedSlots: {customRender: 'Width'}
      }, {
        title: '字号',
        dataIndex: 'FontSize',
        align: 'center',
        key: 'FontSize'
      }, {
        title: 'x对齐',
        dataIndex: 'XAlign',
        align: 'center',
        key: 'XAlign',
        scopedSlots: {customRender: 'XAlign'}
      }, {
        title: 'y对齐',
        dataIndex: 'YAlign',
        align: 'center',
        key: 'YAlign',
        scopedSlots: {customRender: 'YAlign'}
      }, {
        title: '小数位数',
        dataIndex: 'Decnum',
        align: 'center',
        key: 'Decnum',
        scopedSlots: {customRender: 'Decnum'}
      }, {
        title: '倍率',
        dataIndex: 'Mult',
        align: 'center',
        key: 'Mult',
      }, {
        title: '偏移',
        dataIndex: 'Offset',
        align: 'center',
        key: 'Offset'
      }, {
        title: '寄存器地址',
        dataIndex: 'Regaddr',
        align: 'center',
        key: 'Regaddr'
      }, {
        title: '寄存器个数',
        dataIndex: 'Regnum',
        align: 'center',
        key: 'Regnum'
      }, {
        title: '颜色',
        dataIndex: 'Color',
        align: 'center',
        key: 'Color',
        scopedSlots: {customRender: 'Color'}
      }, {
        title: '前缀',
        dataIndex: 'Name',
        align: 'center',
        key: 'Name'
      }, {
        title: '单位',
        dataIndex: 'Unit',
        align: 'center',
        key: 'Unit'
      }, {
        title: '所属页',
        dataIndex: 'PageArr',
        align: 'center',
        key: 'PageArr',
        width: 180,
        scopedSlots: {customRender: 'PageArr'}
      }, {
        title: '操作',
        key: 'operation',
        fixed: 'right',
        align: 'center',
        width: 250,
        scopedSlots: {customRender: 'operation'},
      }],
      //值字典配置
      DictColumns: [{
        title: "序号",
        dataIndex: "key",
        key: "key",
        align: "center",
        width: 65,
        customRender: (text, record, index) => `${index + 1}`,//此处为重点
      }, {
        title: '0',
        dataIndex: 'Dict[0]',
        align: 'center',
        key: 'Dict[0]',
      }, {
        title: '1',
        dataIndex: 'Dict[1]',
        align: 'center',
        key: 'Dict[1]',
      }, {
        title: '2',
        dataIndex: 'Dict[2]',
        align: 'center',
        key: 'Dict[2]',
      }, {
        title: '3',
        dataIndex: 'Dict[3]',
        align: 'center',
        key: 'Dict[3]',
      }, {
        title: '4',
        dataIndex: 'Dict[4]',
        align: 'center',
        key: 'Dict[4]',
      }, {
        title: '5',
        dataIndex: 'Dict[5]',
        align: 'center',
        key: 'Dict[5]',
      }, {
        title: '6',
        dataIndex: 'Dict[6]',
        align: 'center',
        key: 'Dict[6]',
      }, {
        title: '7',
        dataIndex: 'Dict[7]',
        align: 'center',
        key: 'Dict[7]',
      }, {
        title: '8',
        dataIndex: 'Dict[8]',
        align: 'center',
        key: 'Dict[8]',
      }, {
        title: '9',
        dataIndex: 'Dict[9]',
        align: 'center',
        key: 'Dict[9]',
      }, {
        title: '10',
        dataIndex: 'Dict[10]',
        align: 'center',
        key: 'Dict[10]',
      }, {
        title: '11',
        dataIndex: 'Dict[11]',
        align: 'center',
        key: 'Dict[11]',
      }, {
        title: '12',
        dataIndex: 'Dict[12]',
        align: 'center',
        key: 'Dict[12]',
      }, {
        title: '13',
        dataIndex: 'Dict[13]',
        align: 'center',
        key: 'Dict[13]',
      }, {
        title: '14',
        dataIndex: 'Dict[14]',
        align: 'center',
        key: 'Dict[14]',
      }, {
        title: '15',
        dataIndex: 'Dict[15]',
        align: 'center',
        key: 'Dict[15]',
      }, {
        title: '操作',
        key: 'operation',
        fixed: 'right',
        align: 'center',
        width: 250,
        scopedSlots: {customRender: 'operation'},
      }],
      //x对齐
      XAlignList: ['左对齐', '右对齐', '居中', '滚动'],
      //Y对齐
      YAlignList: ['上对齐', '下对齐', '居中'],
      // 小数位数
      DecnumList: [{
        value: "0",
        id: 0
      }, {
        value: "1",
        id: 1
      }, {
        value: "2",
        id: 2
      }, {
        value: "3",
        id: 3
      }, {
        value: "0(无符号)",
        id: 16
      }, {
        value: "1(无符号)",
        id: 17
      }, {
        value: "2(无符号)",
        id: 18
      }, {
        value: "3(无符号)",
        id: 19
      },{
        value: "天气预报",
        id: 192
      }, {
        value: "系统标题",
        id: 208
      }, {
        value: "时间",
        id: 224
      }, {
        value: "值字典1",
        id: 240
      }, {
        value: "值字典2",
        id: 241
      }, {
        value: "值字典3",
        id: 242
      }, {
        value: "值字典4",
        id: 243
      }, {
        value: "值字典5",
        id: 244
      }, {
        value: "值字典6",
        id: 245
      }, {
        value: "值字典7",
        id: 246
      }, {
        value: "值字典8",
        id: 247
      }, {
        value: "值字典9",
        id: 248
      }, {
        value: "值字典10",
        id: 249
      }, {
        value: "值字典11",
        id: 250
      }, {
        value: "值字典12",
        id: 251
      }, {
        value: "值字典13",
        id: 252
      }, {
        value: "值字典14",
        id: 253
      }, {
        value: "值字典15",
        id: 254
      }, {
        value: "系统变量",
        id: 255
      }],
      // 字号
      FontSizeList: [12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 34],
      //   所属页面
      OwningPage: [{
        name: '全部页面',
        id: 100
      }, {
        name: '页面1',
        id: 0
      }, {
        name: '页面2',
        id: 1
      }, {
        name: '页面3',
        id: 2
      }, {
        name: '页面4',
        id: 3
      }, {
        name: '页面5',
        id: 4
      }, {
        name: '页面6',
        id: 5
      }, {
        name: '页面7',
        id: 6
      }, {
        name: '页面8',
        id: 7
      }, {
        name: '页面9',
        id: 8
      }, {
        name: '页面10',
        id: 9
      }, {
        name: '页面11',
        id: 10
      }, {
        name: '页面12',
        id: 11
      }, {
        name: '页面13',
        id: 12
      }, {
        name: '页面14',
        id: 13
      }, {
        name: '页面15',
        id: 14
      }, {
        name: '页面16',
        id: 15
      }, {
        name: '页面17',
        id: 16
      }, {
        name: '页面18',
        id: 17
      }, {
        name: '页面19',
        id: 18
      }, {
        name: '页面20',
        id: 19
      }],
      //   直线配置数据
      dataLine: {
        Color: undefined,
        EndX: undefined,
        EndY: undefined,
        PageArr: [],
        StartX: undefined,
        StartY: undefined,
        isWarn:[],
        isSelect:false
      },//内容
      rulesLine: {
        Color: {required: true, message: '请选择颜色', trigger: 'select'},
        EndX: [{required: true, message: '请输入结束x', trigger: 'blur'},
          {validator: this.validateInteger, trigger: 'blur'}],
        EndY: [{required: true, message: '请输入结束y', trigger: 'blur'},
          {validator: this.validateInteger, trigger: 'blur'}],
        PageArr: {required: true, message: '请选择所属页', trigger: 'select'},
        StartX: [{required: true, message: '请输入起点x', trigger: 'blur'},
          {validator: this.validateInteger, trigger: 'blur'}],
        StartY: [{required: true, message: '请输入起点y', trigger: 'blur'},
          {validator: this.validateInteger, trigger: 'blur'}],
      },
      showLine: false,//是否显示弹窗
      isLineAdd: false,//是否是新增
      dataLineNum: undefined,//编辑：下标
      //   文本配置数据
      selectedLine: [],
      dataText: {
        Color: undefined,
        FontSize: undefined,
        Length: undefined,
        PageArr: [],
        StartX: undefined,
        StartY: undefined,
        Text: undefined,
        Width: undefined,
        XAlign: undefined,
        YAlign: undefined,
        isWarn:[],
        isSelect:false
      },//内容
      rulesText: {
        Length: [{required: true, message: '请输入宽度', trigger: 'blur'},
          {validator: this.validateInteger, trigger: 'blur'}],
        Width: [{required: true, message: '请输入高度', trigger: 'blur'},
          {validator: this.validateInteger, trigger: 'blur'}],
        StartX: [{required: true, message: '请输入起点x', trigger: 'blur'},
          {validator: this.validateInteger, trigger: 'blur'}],
        StartY: [{required: true, message: '请输入起点y', trigger: 'blur'},
          {validator: this.validateInteger, trigger: 'blur'}],
        XAlign: {required: true, message: '请选择x对齐方式', trigger: 'select'},
        YAlign: {required: true, message: '请选择y对齐方式', trigger: 'select'},
        FontSize: {required: true, message: '请选择字号', trigger: 'select'},
        Color: {required: true, message: '请选择颜色', trigger: 'select'},
        PageArr: {required: true, message: '请选择所属页', trigger: 'select'},
        Text: {required: true, message: '请输入文本', trigger: 'blur'},
      },
      showText: false,//是否显示弹窗
      isTextAdd: false,//是否是新增
      dataTextNum: undefined,//编辑：下标
      //   参数配置数据
      selectedText: [],
      dataParas: {
        Color: undefined,
        Decnum: undefined,
        FontSize: undefined,
        Length: undefined,
        Mult: undefined,
        Name: undefined,
        Offset: undefined,
        PageArr: [],
        Regaddr: undefined,
        Regnum: undefined,
        StartX: undefined,
        StartY: undefined,
        Unit: undefined,
        Width: undefined,
        XAlign: undefined,
        YAlign: undefined,
        isWarn:[],
        isSelect:false
      },//内容
      rulesParas: {
        Length: [{required: true, message: '请输入宽度', trigger: 'blur'},
          {validator: this.validateInteger, trigger: 'blur'}],
        Width: [{required: true, message: '请输入高度', trigger: 'blur'},
          {validator: this.validateInteger, trigger: 'blur'}],
        StartX: [{required: true, message: '请输入起点x', trigger: 'blur'},
          {validator: this.validateInteger, trigger: 'blur'}],
        StartY: [{required: true, message: '请输入起点y', trigger: 'blur'},
          {validator: this.validateInteger, trigger: 'blur'}],
        XAlign: {required: true, message: '请选择x对齐方式', trigger: 'select'},
        YAlign: {required: true, message: '请选择y对齐方式', trigger: 'select'},
        FontSize: {required: true, message: '请选择字号', trigger: 'select'},
        Decnum: {required: true, message: '请选择小数位数', trigger: 'select'},
        Mult: [{required: true, message: '请输入倍率', trigger: 'blur'},
          {validator: this.validateInteger, trigger: 'blur'}],
        Offset: [{required: true, message: '请输入偏移', trigger: 'blur'},
          {validator: this.validateInteger, trigger: 'blur'}],
        Regnum: [{required: true, message: '请输入寄存器个数', trigger: 'blur'},
          {validator: this.validateInteger, trigger: 'blur'}],
        Color: {required: true, message: '请选择颜色', trigger: 'select'},
        PageArr: {required: true, message: '请选择所属页', trigger: 'select'},
      },
      showParas: false,//是否显示弹窗
      isParasAdd: false,//是否是新增
      dataParasNum: undefined,//编辑：下标
      //   字典配置数据
      selectedParas: [],
      dataDict: {
        Dict: ['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '']
      },//内容
      showDict: false,//是否显示弹窗
      isDictAdd: false,//是否是新增
      dataDictNum: undefined,//编辑：下标
    };
  },
  created() {
    this.getFarmList()
  },
  methods: {
    /*  筛选设备  */
    // 选择项目列表
    async getFarmList() {
      let res = await farmList()
      this.farmList = res.Code === 0 ? res.Data : []
    },
    //选择项目事件[大棚列表赋值]
    farmChange(e) {
      let _this = this;
      // 清空已选大棚、设备
      _this.form.HouseId = undefined
      _this.form.DevCode = undefined
      // 赋值当前大棚列表
      _this.farmList.forEach((item) => {
        if (item.FarmId === e) {
          _this.HouseList = item.GrantHouses
        }
      })
    },
    //选择大棚事件[设备赋值]
    async HouseChange(e) {
      let _this = this;
      // 清空已选设备
      _this.form.DevCode = undefined
      _this.DevList = []
      let res = await devList(e)
      let devLists = res.Code === 0 ? res.Data : []
      devLists.forEach((item) => {
        if (_this.devShow(item.DevCode)) {
          _this.DevList.push(item)
        }
      })
    },
    // 判断是否为LED进行显示
    devShow(id) {
      const pattern = /008\d\d$/; // 匹配以 "008" 结尾的字符串
      return pattern.test(id.slice(5, 10))
    },
    // LED设备选择事件
    DevChange(e) {
      let _this = this;
      _this.form.DevCode = e
      _this.loadLedFileHttp()
    },
    //读取配置
    async loadLedFileHttp() {
      let _this = this;
      if (_this.form.DevCode) {
        // 清空预览已选
        _this.selectedLine = []
        _this.selectedText = []
        _this.selectedParas = []
        let res = await loadLedFile(_this.form.DevCode)
        if (res.Code === 0) {
          if (res.Data.Page.LineConfig) {
            res.Data.Page.LineConfig.forEach((item) => {
              item.isWarn = []
              item.isSelect = false
            })
          }
          if (res.Data.Page.TextConfig) {
            res.Data.Page.TextConfig.forEach((item) => {
              item.isWarn = []
              item.isSelect = false
            })
          }
          if (res.Data.Page.ParasConfig) {
            res.Data.Page.ParasConfig.forEach((item) => {
              item.isWarn = []
              item.isSelect = false
            })
          }
          _this.devData = res.Data
        } else {
          _this.$message.error('读取配置失败');
          setTimeout(function () {
            _this.form.DevCode = {
              BaseConfig: {
                Baud: undefined,
                DataPolarity: undefined,
                DouColor: undefined,
                InitFlag: undefined,
                ModbusId: undefined,
                OEPolarity: undefined,
                PageSwRate: undefined,
                Pagesize: 0,
                Role: undefined,
                Rs485Idle: undefined,
                RxChannel: undefined,
                ScanType: undefined,
                Title: undefined,
                TxChannel: undefined,
                XNum: undefined,
                YNum: undefined,
              },
              Page: {
                LineConfig: [],
                DictConfig: [],
                ParasConfig: [],
                TextConfig: []
              }
            }
          }, 1000)
        }
      } else {
        _this.$message.error('请选择LED设备');
      }
    },
    //保存
    saveLedFileHttp() {
      let _this = this;
      // 判断是否选择了LED
      if (_this.form.DevCode) {
        _this.devData.DevCode = _this.form.DevCode
        // 表单验证是否输入基础配置
        _this.$refs.baseForm.validate(async valid => {
          if (valid) {
            let res = await saveLedFile(_this.devData)
            if (res.Message === 'Success') {
              this.$message.success('保存成功');
            } else {
              _this.$message.error('保存失败');
            }
          }
        });
      } else {
        _this.$message.error('请配置LED设备');
      }
    },
    /*  基础配置  */
    // 判断是否为整数
    validateInteger(rule, value, callback) {
      if (value && !Number.isInteger(Number(value))) {
        callback(new Error('请输入整数'));
      } else {
        callback();
      }
    },
    // 发送基础/节目成功后，等待设备回应
    async Ledrespond(num) {
      let _this = this;
      let res = await getMessageStatus(_this.form.DevCode)
      if (res.Data === '') {
        _this.$message.info(`查询响应 ${num}:等待设备回应，请稍候`);
        if (num < 5) {
          setTimeout(function () {
            _this.Ledrespond(num + 1)
          }, 2000)
        }
      } else {
        _this.$message.success('设备回应成功');
      }
    },
    // 发送基础
    async sendLedConfigHttp() {
      let _this = this;
      if (_this.form.DevCode) {
        let res = await sendLedConfig(_this.form.DevCode)
        if (res.Message === 'Success') {
          _this.$message.success('发送成功');
          // 等待设备回应
          setTimeout(function () {
            _this.Ledrespond(1)
          }, 1000)
        } else {
          _this.$message.error('发送失败');
        }
      } else {
        _this.$message.error('请选择LED设备');
      }
    },
    // 发送节目
    async sendLedProgramHttp() {
      let _this = this;
      if (_this.form.DevCode) {
        let res = await sendLedConfigdisplay(_this.form.DevCode)
        if (res.Message === 'Success') {
          this.$message.success('发送成功');
          // 等待设备回应
          setTimeout(function () {
            _this.Ledrespond(1)
          }, 1000)
        } else {
          _this.$message.error('发送失败');
        }
      } else {
        _this.$message.error('请选择LED设备');
      }
    },
    /* 节目配置 */
    // 小数位数
    showDecnum(id) {
      let _this = this
      let name = ''
      _this.DecnumList.forEach((item) => {
        if (item.id == id) {
          name = item.value
        }
      })
      return name
    },
    //下载基础配置
    downloadBasics() {
      let _this = this
      if (_this.form.DevCode) {
        window.open(`http://mp.ysiot.net:9003/api/v1/getFile/led-${this.form.DevCode}-base.bin`)
      } else {
        _this.$message.error('请选择LED设备');
      }
    },
    //下载节目配置
    downloadProgram() {
      let _this = this
      if (_this.form.DevCode) {
        window.open(`http://mp.ysiot.net:9003/api/v1/getFile/led-${this.form.DevCode}-display.bin`)
      } else {
        _this.$message.error('请选择LED设备');
      }
    },
    // 上移
    moveUp(record, indent) {
      let _this = this
      if (indent > 0) {
        let upData = []
        let config = ''
        switch (_this.activeKey) {
          case '1':
            config = 'LineConfig'
            break
          case '2':
            config = 'TextConfig'
            break
          case '3':
            config = 'ParasConfig'
            break
          case '4':
            config = 'DictConfig'
            break
        }
        upData = _this.devData.Page[config][indent - 1];
        _this.devData.Page[config].splice(indent - 1, 1);//删除上一条的数据
        _this.devData.Page[config].splice(indent, 0, upData);//将上一条数据插入到当前位置
      } else {
        _this.$message.info(`已经是第一条，上移失败`);
      }
    },
    // 下移
    moveDown(record, indent) {
      let _this = this
      let config = ''
      switch (_this.activeKey) {
        case '1':
          config = 'LineConfig'
          break
        case '2':
          config = 'TextConfig'
          break
        case '3':
          config = 'ParasConfig'
          break
        case '4':
          config = 'DictConfig'
          break
      }
      if (indent + 1 === _this.devData.Page[config].length) {
        _this.$message.info('已经是最后一条，下移失败');
      } else {
        let downData = _this.devData.Page[config][indent + 1];
        _this.devData.Page[config].splice(indent + 1, 1);
        _this.devData.Page[config].splice(indent, 0, downData);
      }
    },
    // 克隆
    copyRecord(record, indent) {
      let _this = this
      let config = ''
      switch (_this.activeKey) {
        case '1':
          config = 'LineConfig'
          break
        case '2':
          config = 'TextConfig'
          break
        case '3':
          config = 'ParasConfig'
          break
        case '4':
          config = 'DictConfig'
          break
      }
      _this.devData.Page[config].splice(indent + 1, 0, record)
    },
    // 删除
    deleteRecord(indent) {
      let _this = this
      let config = ''
      switch (_this.activeKey) {
        case '1':
          config = 'LineConfig'
          break
        case '2':
          config = 'TextConfig'
          break
        case '3':
          config = 'ParasConfig'
          break
        case '4':
          config = 'DictConfig'
          break
      }
      _this.devData.Page[config].splice(indent, 1)
    },
    //   直线新增||编辑
    openLine(record, indent) {
      let _this = this
      if (record) {
        _this.isLineAdd = false
        _this.dataLine = JSON.parse(JSON.stringify(record))
        _this.dataLineNum = indent
      } else {
        _this.dataLine = {
          Color: undefined,
          EndX: undefined,
          EndY: undefined,
          PageArr: [],
          StartX: undefined,
          StartY: undefined,
        }
        _this.isLineAdd = true
      }
      _this.showLine = true
    },
    lineOk() {
      let _this = this
      _this.$refs.formLine.validate(async valid => {
        if (valid) {
          if (_this.isLineAdd) {
            _this.devData.Page.LineConfig.push(_this.dataLine)
            _this.inspectLine(_this.devData.Page.LineConfig[_this.devData.Page.LineConfig.length - 1])
          } else {
            _this.devData.Page.LineConfig[_this.dataLineNum] = _this.dataLine
            _this.inspectLine(_this.devData.Page.LineConfig[_this.dataLineNum])
          }
          _this.showLine = false
        }
      });
    },
    onSelectLine(selectedRowKeys) {
      let _this = this;
      if(selectedRowKeys.length === _this.devData.Page.LineConfig.length || selectedRowKeys.length === 0){
        _this.selectedLine = selectedRowKeys;
        _this.devData.Page.LineConfig.forEach((item)=>{
          item.isSelect = selectedRowKeys.length > 0
        })
      }else{
        let newList = _this.getArrDifference(_this.selectedLine, selectedRowKeys)
        _this.selectedLine = selectedRowKeys;
        _this.devData.Page.LineConfig[newList[0]].isSelect = !_this.devData.Page.LineConfig[newList[0]].isSelect
      }
    },
    inspectLine(item){
      let _this = this
      // 底板的宽高
      const divWidth = _this.devData.BaseConfig.XNum * (_this.devData.BaseConfig.ScanType === 0 ? 64 : 32)
      const divHeight = _this.devData.BaseConfig.YNum * (_this.devData.BaseConfig.ScanType === 0 ? 32 : 16)
      // 宽度：起点X、(结束X - 起点X) + 起点X   高度：起点Y、(结束Y - 起点Y) + 起点Y
      item.isWarn = []
      if((item.StartY.toString() === item.EndY.toString()) || (item.StartX.toString() === item.EndX.toString())){
        if (item.StartX >= divWidth) {
          item.isWarn.push('StartX')
        }
        // if (Math.abs(parseInt(item.EndX) - parseInt(item.StartX)) + parseInt(item.StartX) >= divWidth) {
        //   item.isWarn.push('EndX')
        // }
        if (item.EndX >= divWidth) {
          item.isWarn.push('EndX')
        }
        if (item.StartY >= divHeight) {
          item.isWarn.push('StartY')
        }
        // if (Math.abs(parseInt(item.EndY) - parseInt(item.StartY)) + parseInt(item.StartY) >= divHeight) {
        //   item.isWarn.push('EndY')
        // }
        if (item.EndY >= divHeight) {
          item.isWarn.push('EndY')
        }
      }else {
        item.isWarn = ['StartX','EndX','StartY','EndY']
      }
    },
    //   文本新增||编辑
    openText(record, indent) {
      let _this = this
      if (record) {
        _this.isTextAdd = false
        _this.dataText = JSON.parse(JSON.stringify(record))
        _this.dataTextNum = indent
      } else {
        _this.dataText = {
          Color: undefined,
          FontSize: undefined,
          Length: undefined,
          PageArr: [],
          StartX: undefined,
          StartY: undefined,
          Text: undefined,
          Width: undefined,
          XAlign: undefined,
          YAlign: undefined,
        }
        _this.isTextAdd = true
      }
      _this.showText = true
    },
    textOk() {
      let _this = this
      _this.$refs.formText.validate(async valid => {
        if (valid) {
          if (_this.isTextAdd) {
            _this.devData.Page.TextConfig.push(_this.dataText)
            _this.inspectText(_this.devData.Page.TextConfig[_this.devData.Page.TextConfig.length - 1])
          } else {
            _this.devData.Page.TextConfig[_this.dataTextNum] = _this.dataText
            _this.inspectText(_this.devData.Page.TextConfig[_this.dataTextNum])
          }
          _this.showText = false
        }
      });
    },
    onSelectText(selectedRowKeys) {
      let _this = this;
      // 判断全选
      if(selectedRowKeys.length === _this.devData.Page.TextConfig.length || selectedRowKeys.length === 0){
        _this.selectedText = selectedRowKeys;
        _this.devData.Page.TextConfig.forEach((item)=>{
          item.isSelect = selectedRowKeys.length > 0
        })
      }else{
        let newList = _this.getArrDifference(_this.selectedText, selectedRowKeys)
        _this.selectedText = selectedRowKeys;
        _this.devData.Page.TextConfig[newList[0]].isSelect = !_this.devData.Page.TextConfig[newList[0]].isSelect
      }
    },
    inspectText(item){
      let _this = this
      // 底板的宽高
      const divWidth = _this.devData.BaseConfig.XNum * (_this.devData.BaseConfig.ScanType === 0 ? 64 : 32)
      const divHeight = _this.devData.BaseConfig.YNum * (_this.devData.BaseConfig.ScanType === 0 ? 32 : 16)
      // 宽度：起点X、 起点X + 宽度   高度：起点y、起点y+高度
      item.isWarn = []
      if (item.StartX > divWidth) {
        item.isWarn.push('StartX')
      }
      if (parseInt(item.StartX) + parseInt(item.Length) > divWidth) {
        item.isWarn.push('Length')
      }
      if (item.StartY > divHeight) {
        item.isWarn.push('StartY')
      }
      if (parseInt(item.StartY) + parseInt(item.Width) > divHeight) {
        item.isWarn.push('Width')
      }
    },
    //   参数新增||编辑
    openParas(record, indent) {
      let _this = this
      if (record) {
        _this.isParasAdd = false
        _this.dataParas = JSON.parse(JSON.stringify(record))
        _this.dataParasNum = indent
      } else {
        _this.dataParas = {
          Color: undefined,
          Decnum: undefined,
          FontSize: undefined,
          Length: undefined,
          Mult: undefined,
          Name: undefined,
          Offset: undefined,
          PageArr: [],
          Regaddr: undefined,
          Regnum: undefined,
          StartX: undefined,
          StartY: undefined,
          Unit: undefined,
          Width: undefined,
          XAlign: undefined,
          YAlign: undefined,
        }
        _this.isParasAdd = true
      }
      _this.showParas = true
    },
    parasOk() {
      let _this = this
      _this.$refs.formParas.validate(async valid => {
        if (valid) {
          if (_this.isParasAdd) {
            _this.devData.Page.ParasConfig.push(_this.dataParas)
            _this.inspectText(_this.devData.Page.ParasConfig[_this.devData.Page.ParasConfig.length - 1])
          } else {
            _this.devData.Page.ParasConfig[_this.dataParasNum] = _this.dataParas
            _this.inspectText(_this.devData.Page.ParasConfig[_this.dataParasNum])
          }
          _this.showParas = false
        }
      });
    },
    onSelectParas(selectedRowKeys) {
      let _this = this;
      if(selectedRowKeys.length === _this.devData.Page.ParasConfig.length || selectedRowKeys.length === 0){
        _this.selectedParas = selectedRowKeys;
        _this.devData.Page.ParasConfig.forEach((item)=>{
          item.isSelect = selectedRowKeys.length > 0
        })
      }else{
        let newList = _this.getArrDifference(_this.selectedParas, selectedRowKeys)
        _this.selectedParas = selectedRowKeys;
        _this.devData.Page.ParasConfig[newList[0]].isSelect = !_this.devData.Page.ParasConfig[newList[0]].isSelect
      }
    },
    //   字典新增||编辑
    openDict(record, indent) {
      let _this = this
      if (record) {
        _this.isDictAdd = false
        // 创建一个新的独立对象
        _this.dataDict = JSON.parse(JSON.stringify(record))
        _this.dataDictNum = indent
      } else {
        _this.dataDict = {
          Dict: ['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '']
        }
        _this.isDictAdd = true
      }
      _this.showDict = true
    },
    dictOk() {
      let _this = this
      if (_this.isDictAdd) {
        _this.devData.Page.DictConfig.push(_this.dataDict)
      } else {
        _this.devData.Page.DictConfig[_this.dataDictNum] = _this.dataDict
      }
      _this.showDict = false
    },
    // 预览判断页数
    canShow(pageArr, index) {
      let isShow = false
      pageArr.forEach((item) => {
        if (item === 100 || item + 1 === index) {
          isShow = true
        }
      })
      return isShow
    },
    // 两个数组相比较  新数组中的数据剔除原数组中的数据
    getArrDifference(arr1, arr2) {
      return arr1.concat(arr2).filter(function (v, i, arr) {
        return arr.indexOf(v) === arr.lastIndexOf(v);
      });
    },
    // 检查节目
    inspectProgram() {
      let _this = this
      if (_this.form.DevCode) {
        // 底板的宽高
        const divWidth = _this.devData.BaseConfig.XNum * (_this.devData.BaseConfig.ScanType === 0 ? 64 : 32)
        const divHeight = _this.devData.BaseConfig.YNum * (_this.devData.BaseConfig.ScanType === 0 ? 32 : 16)
        // 直线检查
        let lineWarnNum = 0
        _this.devData.Page.LineConfig.forEach((item) => {
          // 宽度：起点X、(结束X - 起点X) + 起点X   高度：起点Y、(结束Y - 起点Y) + 起点Y
          item.isWarn = []
          if((item.StartY.toString() === item.EndY.toString()) || (item.StartX.toString() === item.EndX.toString())){
            if (item.StartX >= divWidth) {
              item.isWarn.push('StartX')
            }
            // if (Math.abs(parseInt(item.EndX) - parseInt(item.StartX)) + parseInt(item.StartX) >= divWidth) {
            //   item.isWarn.push('EndX')
            // }
            if (item.EndX >= divWidth) {
              item.isWarn.push('EndX')
            }
            if (item.StartY >= divHeight) {
              item.isWarn.push('StartY')
            }
            // if (Math.abs(parseInt(item.EndY) - parseInt(item.StartY)) + parseInt(item.StartY) >= divHeight) {
            //   item.isWarn.push('EndY')
            // }
            if (item.EndY >= divHeight) {
              item.isWarn.push('EndY')
            }
          }else {
            lineWarnNum = lineWarnNum + 4
            item.isWarn = ['StartX','EndX','StartY','EndY']
          }
        })
        // 文本检查
        let TextWarnNum = 0
        _this.devData.Page.TextConfig.forEach((item) => {
          // 宽度：起点X、 起点X + 宽度   高度：起点y、起点y+高度
          item.isWarn = []
          if (item.StartX > divWidth) {
            TextWarnNum++
            item.isWarn.push('StartX')
          }
          if (parseInt(item.StartX) + parseInt(item.Length) > divWidth) {
            TextWarnNum++
            item.isWarn.push('Length')
          }
          if (item.StartY > divHeight) {
            TextWarnNum++
            item.isWarn.push('StartY')
          }
          if (parseInt(item.StartY) + parseInt(item.Width) > divHeight) {
            TextWarnNum++
            item.isWarn.push('Width')
          }
        })
        // 参数检查
        let ParasWarnNum = 0
        _this.devData.Page.ParasConfig.forEach((item) => {
          // 宽度：起点X、 起点X + 宽度   高度：起点y、起点y+高度
          item.isWarn = []
          if (item.StartX > divWidth) {
            ParasWarnNum++
            item.isWarn.push('StartX')
          }
          if (parseInt(item.StartX) + parseInt(item.Length) > divWidth) {
            ParasWarnNum++
            item.isWarn.push('Length')
          }
          if (item.StartY > divHeight) {
            ParasWarnNum++
            item.isWarn.push('StartY')
          }
          if (parseInt(item.StartY) + parseInt(item.Width) > divHeight) {
            ParasWarnNum++
            item.isWarn.push('Width')
          }
        })

        if (lineWarnNum === 0 && TextWarnNum === 0 && ParasWarnNum === 0) {
          _this.$notification['success']({
            message: '节目配置检查',
            description: '检查完成，暂无错误配置！',
          });
        }else {
          _this.$notification['warning']({
            message: '节目配置检查',
            description:
                (<div>
                  <div>直线配置有<span style="color:red;margin:10px">{lineWarnNum}</span>处错误配置</div>
                  <div>文本配置有<span style="color:red;margin:10px">{TextWarnNum}</span>处错误配置</div>
                  <div>参数配置有<span style="color:red;margin:10px">{ParasWarnNum}</span>处错误配置</div>
                  <div>请及时处理！</div>
                </div>)
          });
        }
      } else {
        _this.$message.error('请选择LED设备');
      }
    }
  },
};
</script>

<style scoped>
.custom-label {
  width: 60px;
  display: inline-block;
  text-align: center;
}

.led-page {
  position: absolute;
  bottom: -40px;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 5px;
  color: #000;
  left: 42%;
}

/deep/ .ant-form-inline .ant-form-item-with-help {
  margin-bottom: 0;
}

.table-add-swl {
  margin-bottom: 15px;
  display: flex;
  justify-content: flex-end;
}

.led-plate {
  background-color: #000;
  color: #fff;
  position: relative;
  margin-bottom: 20px;
}

.rowLeft {
  -webkit-animation: 3s rowup linear infinite normal;
  animation: 3s rowup linear infinite normal;
  position: relative;
}

@keyframes rowup {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  100% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
  }
}

.disposition, .disposition-line {
  position: absolute;
  overflow: hidden;
  cursor: pointer;
}

.disposition:hover, .disposition-select {
  color: #fff !important;
  border: 2px solid #fff !important;
  overflow: hidden;
}

.disposition-line:hover, .disposition-line-select {
  background-color: #fff !important;
}
</style>
